<template>
    <view class="card">
        <view class="header" id='header'>
            <view class="title">
                {{questionTitle}}
            </view>
        </view>
        <view class="header-placeholder" :style="[headerPlaceholderStyle]" v-if='false'></view>
        <view class="body">
            <view class="question-box">
                <slot name="question"></slot>
            </view>
            <view class="answer-box">
                <slot name="answer"></slot>
            </view>
        </view>
        <view class="bottom-placeholder" :style="[bottomPlaceholderStyle]"></view>
        <view class="bottom" id='bottom'>
            <view class="button-box">
                <template v-if='!isAlreadySubmission'>
                    <view class="button submission" @click="tapSubmit">
                        确认提交结果
                    </view>
                </template>
                <template v-else>
                    <view class="button restart" @click="tapRestart">
                        再来一次
                    </view>
                    <view class="button next" @click="tapNext(finish)">
                        {{finish ? "完成" : "下一题"}}
                    </view>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getEnumValueName
    } from "../../../../../common/utils/util.js";
    import {
        QUESTION_TYPE
    } from "../../../services/index.js"
    import TestCardMixin from "../mixins/test-card-mixin.js";
    export default {
        mixins: [TestCardMixin],
        props: {
            isAlreadySubmission: false
        },
        computed: {
            questionTitle: function() {
                let result = `${this.index+1}.`;
                if (this.currentQuestion && (this.currentQuestion.questionTypeId == QUESTION_TYPE.CLOZE.value ||
                        this.currentQuestion.questionTypeId == QUESTION_TYPE.LINE_LINK.value)) {
                    result = `${result} ${getEnumValueName(QUESTION_TYPE, this.currentQuestion.questionTypeId)}`
                } else if (this.currentQuestion) {
                    result = `${result} ${this.currentQuestion.subject}`
                }
                return result;
            },
            headerPlaceholderStyle: function() {
                return {
                    height: `${this.headerHeight}px`
                }
            },
            bottomPlaceholderStyle: function() {
                return {
                    height: `${this.bottomHeight}px`
                }
            }
        },
        watch: {
            currentQuestion: {
                handler: function(n) {
                    this.$nextTick(() => {
                        this.getHeight();
                    })
                },
                immediate: true
            }
        },
        data: function() {
            return {
                headerHeight: 0,
                bottomHeight: 0
            }
        },
        methods: {
            getHeight() {
                const query = uni.createSelectorQuery().in(this);
                query.select("#header").boundingClientRect();
                query.select("#bottom").boundingClientRect();
                query.exec(res => {
                    if (res[0] && res[0].height) {
                        this.headerHeight = res[0].height
                    }
                    if (res[1] && res[1].height) {
                        this.bottomHeight = res[1].height
                    }
                })
            },
            tapNext(finish) {
                this.$emit('next')
            },
            tapSubmit() {
                this.$emit('submit')
            },
            tapRestart() {
                this.$emit('restart')
            }

        }
    }
</script>

<style lang="scss" scoped>
    .card {
        position: relative;
        width: 100%;
        height: 100%;

        .header {
            padding: 20rpx;
            // position: fixed;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            background: #fff;

            .title {
                font-size: 38rpx;
                font-weight: 700;

            }
        }

        .body {
            display: flex;
            flex-direction: column;
            padding: 20rpx;

            .question-box {
                display: flex;
                flex-direction: column;
            }

            .answer-box {
                display: flex;
                flex-direction: column;
            }
        }

        .bottom {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            background: #fff;

            .button-box {
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 10rpx 20rpx;
                padding-bottom: 30rpx;

                .button {
                    flex: 1;
                    margin-right: 15rpx;
                    border-radius: 10rpx;
                    height: 90rpx;
                    line-height: 90rpx;
                    text-align: center;
                    font-size: 28rpx;
                    font-weight: 700;
                    color: #333;
                }

                .button:last-child {
                    margin-right: 0;
                }

                .submission {
                    background: #ffda17;
                    color: #333;
                }

                .restart {
                    background: #e8f4fd;
                    color: #1893ed;
                }

                .next {
                    background: #ffeae6;
                    color: #ff4747;
                }
            }
        }
    }
</style>